<template>
	<div class="BlueLineBox">
		<div v-for="(item, index) in data" :key="index">
			<div class="timeHeader" v-if="item.dateFormat.showDate">
				<div class="dateBox">
					<div class="month">{{ item.dateFormat.month }}月</div>
					<div class="day">{{ item.dateFormat.day }}</div>
				</div>
			</div>
			<div
				class="datalist"
			>
				<div class="continer" @click="goDetail(item)">
					<div class="timeBox">
						<span class="left">{{ item.dateFormat.time }}</span>
            <!-- publishers -->
             <div class="right">
              发布人：<span v-for="n in item.publishers">{{ n.userName }}</span>
             </div>
					</div>
					<div class="title">
						<div v-if="item.important=='1'">
							重要
							<div></div>
						</div>
						<span>{{ item.linkTitle }}</span>
					</div>
					<div class="tag">
						<Tags :title="item.catalogue" type="type6"/>
					</div>
					<!-- <p class="zhdp">综合点评:</p> -->
					<p class="content">{{ item.text }}</p>
				</div>
				<div class="dot">
					<div></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, watch } from 'vue'
const props = defineProps({
  data: []
})
const emit = defineEmits(['click'])
const data = ref([]) as any
function goDetail(item:any) {
  emit('click',item)
}
watch(()=>props.data,()=>{
  data.value = handleData(props.data)
})
function handleData(data) {
  let list = JSON.parse(JSON.stringify(data))
  let dateMap:Array<string> = []
  list.forEach(key=>{
    let date = dayjs(key.publishTime ).format('MM-DD')
    let isShow = false
    if (!dateMap.includes(date)) {
      isShow = true
      dateMap.push(date)
    } 
    key.dateFormat = {
      showDate: isShow,
      month: dayjs(key.publishTime ).format('MM'),
      day: dayjs(key.publishTime ).format('DD'),
      date:  date,
      time:  dayjs(key.publishTime ).format('HH:mm:ss')
    }
    
  })
  console.log('数据处理',list);
  
  return list
}
</script>

<style scoped lang="less">
.BlueLineBox {
	padding-left: 70px;
	margin-top: 30px;
	> div {
		position: relative;

		border-left: 1px dashed @color-1356FF;
	}
}
.timeHeader {
	position: absolute;
	top: -15px;
  .dateBox {
    width: 56px;
    text-align: center;
    position: absolute;
    left: -70px;
    .month {
      background: linear-gradient(135deg, #2b8fff 0%, #1356ff 100%);
      border-radius: 4px 4px 0px 0px;
      font-size: 16px;
      color: #ffffff;
      line-height: 29px;
    }
    .day {    
      background: #eef3ff;
      font-size: 14px;
      color: #1356ff;
      padding: 3px 0;
    }
  }
}
.header2 {
	// padding: 25px 0;
	font-size: 16px;
	padding-left: 30px;
	font-weight: 600;
	font-size: 16px;
	color: #293366;
}

.datalist {
	padding: 16px;
	// margin-left: 75px;
	// border-left: 1px dashed @color-1356FF;
	position: relative;
	.dot {
		position: absolute;
		width: 16px;
		height: 16px;
		background-color: #ecf0ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 50px;
		left: -9px;
		> div {
			width: 50%;
			height: 50%;
			background-color: @color-1356FF;
			border-radius: 50%;
		}
	}
	.continer {
		background: #fafafb;
		border-radius: 16px;
		padding: 24px;
		// height: 200px;
		margin-left: 5px;
		font-size: 14px;
	}
}
.timeBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	.left {
		font-size: 16px;
		color: #1356ff;
	}
	.right {
		font-size: 13px;
		color: #8f919c;
    >span {
      &:not(:last-child)::after {
        content: "、";
      }
    }
	}
}
.title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	> span {
		font-weight: 600;
		font-size: 16px;
		color: #0f142c;
	}
	> div {
		display: flex;
		align-items: center;
		padding-left: 8px;
		border-radius: 5px;
		width: 50px;
		height: 20px;
		font-size: 12px;
		color: #ffffff;
		margin-right: 8px;
		background: linear-gradient(#e43933 0%, #f4711d 100%);
		position: relative;
		> div {
			position: absolute;
			width: 15px;
			height: 20px;
			border-bottom-left-radius: 50%;
			background-color: #fff;
			right: -3px;
			top: -1px;
		}
	}
}
.tag {
	display: flex;
	gap: 15px;
	margin-bottom: 10px;
	// > div {
	// 	font-size: 12px;
	// 	width: auto;
	// 	padding: 3px 8px;
	// 	color: #f4711d;
	// 	background-color: #fff2e9;
	// 	border: 1px solid #ffe3cf;
	// 	border-radius: 4px;
	// }
}
.zhdp {
	font-size: 12px;
	color: @color-636976;
	margin-top: 10px;
}
.content {
	font-size: 12px;
	color: @color-636976;
}
</style>
